<template>
    <div class="logo">
        <img :src="logo" />
        <div class="title">个人后台</div>
        <el-button type="text" @click="goBack" class="back-button">
            <el-icon><DArrowLeft /></el-icon> 返回主页
        </el-button>
        
    </div>
</template>

<script setup lang="ts">
import logo from '@/assets/images/logo.png'
import { DArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.push('/home')
}
</script>

<style scoped lang="scss">
.logo{
    display: flex;
    align-items: center;
    padding-left: 25px;
    img{
        width: 40px;
        height: 40px;
    }
    .title{
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        font-family: Inter;
        padding-left: 10px;
    }
    .back-button {
    color: #F3AF28; /* 设置按钮颜色为黄色 */
    font-size: 16px;
    cursor: pointer;
    padding-left: 20px;
    display: flex;
    align-items: center;
    background-color: transparent; /* 透明背景 */
    .el-icon {
    margin-right: 8px;
    }
  }
}
</style>